<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线客服 - 用户端</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/client.css">

</head>

<body>
    <header>
        <div class="container">
            Node.js + Express + Socket.io + Mysql 构建在线客服聊天系统 ( 用户端 )
        </div>
    </header>
    <div class="container tbod" id="tbob"  >
        <div class="chat-info col-md-2"></div>
        <div class="chat col-md-8">
            <div class="chat-content col-lg-12 col-md-12 col-xs-12 col-sm-12" style="padding: 0;margin: 0;">

                <div class="chat-for-server chat-item">
                    <div class="chat-item-info">
                        <div class="chat-item-info-nick">客服：小萝莉 <span class="time">2020年3月10日12:47:07</span></div>
                    </div>
                    <div class="chat-item-detail">
                        <div class="chat-item-user">
                            <div class="chat-item-user-thumb">
                                <span class="glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                        <div class="chat-item-content">
                            sdasasdassddasdadsdsdasdadadaddsdasdadadasdadassssssssssssssssssssssssssss
                        </div>
                    </div>
                </div>

                <div class="chat-for-user chat-item  "style="position:relative">
                    <div class="chat-item-info "style="display:block;width100%">
                        <div class="chat-item-info-nick"> 我<span class="time">2020年3月10日12:47:07</span></div>
                    </div>
                    <div class="chat-item-detail  " style="width: 100%;"> 
                        <div class="chat-item-content col-lg-11 col-md-11 col-xs-11 col-sm-11">
                            sdasasdassddasdadsdsdasdadadaddsdasdadadasdadassssssssssssssssssssssssssss
                        </div>
                        <div class="chat-item-user chat-item-user-left col-lg-1 col-md-1 col-xs-1 col-sm-1" >
                            <div class="chat-item-user-thumb">
                                <span class="glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                    </div>
                </div>
                
             
            </div>
            <!-- <span class="glyphicon glyphicon-font"></span> -->
            <!-- <span class="glyphicon glyphicon-picture"></span> -->
            <!-- <span class="glyphicon glyphicon-earphone"></span> -->
           <div class="container   div-group col-lg-12 col-md-12 col-xs-12 col-sm-12"  style="padding: 0;margin: 0;">
              <div class="chat-tools btn-group">
                <button class="btn btn-info glyphicon glyphicon-font"></button>
                <button class="btn btn-info glyphicon glyphicon-picture"></button>
                <button class="btn btn-info glyphicon glyphicon-earphone"></button>
                <button class="btn btn-info glyphicon glyphicon-phone"></button>
                <button class="btn btn-default glyphicon glyphicon-node" style="color:#808080">工具</button>
             </div>
             <div class="chat-input">
                <div class="chat-input-content">
                    <textarea id="message" class="form-control" cols="30" rows="4"></textarea>
                </div>
                <div class="chat-input-btn">
                    <button class="btn btn-success" id="sendMessage">发送(Shfit + Enter)</button>
                </div>
             </div>
           </div>

        </div>
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="/chat/socket.io.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/client.js"></script>
    <script src="js/flexible.js"></script>
</body>
</html>